<!-- 真人认证 -->
<template>
  <view class="authentication-video-box">
    <van-nav-bar title="实名认证" left-text="返回" left-arrow @click-left="onClickLeft" />
    <template v-if="state.authResult.RealState == 0">
      <view class="auth-base-box" v-if="true">
        <view class="authentication-video-base">
          <van-image round fit="cover" width="350rpx" height="350rpx" :src="state.photoImg.Path" />
        </view>
        <view class="authentication-video-photo" @click="state.isPhoto = true">
          点击上传照片
        </view>
        <view class="authentication-tips-list">
          <view class="authentication-tips-item"><img src="@/assets/image/icon102.png" /><text>请正对屏幕并使脸位于取景框内</text>
          </view>
          <view class="authentication-tips-item"><img src="@/assets/image/icon103.png" /><text>请保持光线充足，避免关照过强或过弱</text>
          </view>
          <view class="authentication-tips-item"><img src="@/assets/image/icon104.png" /><text>根据画面图示完成单个或多个动作检测</text>
          </view>
          <view class="authentication-tips-item"><img src="@/assets/image/icon105.png" /><text>请确保上传照片与认证人员一致</text>
          </view>
        </view>
      </view>
    </template>

    <view class="authentication-success" v-if="state.authResult.RealState == 1">
      <view class="authentication-success-box">
        <img src="@/assets/image/icon89.png" alt="">
        <view>认证成功</view>
      </view>
      <!-- <van-button class="success" type="primary">您的本月次数已用尽</van-button> -->
    </view>
    <AuthError v-if="state.authResult.RealState == 2" />
    <view class="authentication-bottom-btn">
      <view class="authentication-bottom-top">
        <!-- <van-button type="primary" @click="state.isVideo = true">开始认证</van-button> -->
        <van-button type="primary" @click="UserRealAuthSubmitFn()">{{ startName() }}</van-button>
      </view>
      <view class="authentication-bottom-bottom" v-if="state.authResult.RealState == 0"
        @click="state.isPhoto = !state.isPhoto">
        <img src="@/assets/image/icon02.png" v-if="state.isPhoto" />
        <img src="@/assets/image/icon01.png" v-else />
        <text>是否同步照片为您的头像</text>
      </view>
    </view>
  </view>
  <VideoPage v-if="state.isVideo" @update:goBackClose="ev => state.isVideo = ev"
    @update:authImgList="ev => state.authImgList = ev" @startAuthFn="startAuthFn"></VideoPage>
  <UploadHeadPhoto v-if="state.isPhoto" :isShow="state.isPhoto" @update:isShow="(ev) => state.isPhoto = ev"
    @update:checkImg="ev => state.photoImg = ev[0]" />
</template>
 
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import c1 from "@/assets/image/icon106.png"
import UploadHeadPhoto from '@/components/uploadHeadPhoto/index.vue'
import AuthError from "@/pages/home/components/authError/index.vue"
import VideoPage from "./videoPage/index.vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
const state = reactive({
  photoImg: {
    Path: c1
  },
  isPhoto: false,
  show: false,
  isVideo: false,
  isAvatar: false,
  authResult: {},
  authImgList: [],
  UserAuthCount:0, // 本月认证次数
})

onLoad((options) => {
})

onMounted(() => {
  UserRealAuthResultFn()
})

const { proxy } = getCurrentInstance();

// 获取认证结果
import {
  UserRealAuth
} from "@/api/person/index.js"

const UserRealAuthResultFn = async () => {
  let data = await proxy.$get(UserRealAuth)
  if (data.code == 200) {
    state.authResult = data.data.find(o => o.RealType == 0)
    setAuthorization("UserRealAuth", data.data)
    // // 认证次数大于 1 
    // if(state.authResult.RealState == 1){
    //   UserAuthCountFn()
    // }
  }
}

const UserRealAuthSubmitFn = () => {
  let RealState = state.authResult.RealState
  if (RealState == 0) {
    if (!state.photoImg.ID) {
      uni.showToast({
        title: "请上传图片",
        icon: "none"
      })
      return
    }
    state.isVideo = true
  } else {
    if(RealState == 1){
      UserAuthCountFn()
      return 
    }
    state.authResult.RealState = 0
  }
}

// 开始认证
const startAuthFn = () => {
  UserRealAuthStartFn()
}

import {
  UserRealAuthStart,
  UserAuthCount, // 认证次数
} from "@/api/auth/index.js"

const UserRealAuthStartFn = async () => {
  let sex = JSON.parse(getAuthorization('userInfo')).Sex
  let params = {
    "authType": 0,
    "userImgFileID": state.photoImg.ID,
    "fileIDs": state.authImgList.map(o => o.ID),
    "isAvatar": state.isAvatar
  }
  try {
    uni.showLoading({})
    let data = await proxy.$post(UserRealAuthStart, params)
    state.isVideo = false
    uni.hideLoading()
    UserRealAuthResultFn() // 获取认证结果
  } catch (error) {
    state.isVideo = false
    uni.hideLoading()
  }
}

// 获取认证次数
const UserAuthCountFn = async () => {
  let data = await proxy.$get(UserAuthCount)
  if(data.data.RealAuthCount > 0){
    state.authResult.RealState = 0
  }else{
    uni.showToast({
      title:'本月认证次数已用完',
      icon:"none"
    })
  }
}

// 认证下面的btnName
const startName = () => {
  let { RealState } = state.authResult
  let name = RealState == 0 ? '开始认证' : RealState == 1 ? '重新认证' : RealState == 2 ? "重新提交" : '重新认证'
  return name
}

const onClickLeft = () => {
  history.back()
}

</script>

<style lang="scss" scoped>
.authentication-video-box {
  background: #F7F8F9;
  min-height: calc(100vh - 80rpx);
  box-sizing: border-box;

  .authentication-video-base {
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
  }
}

.authentication-video-photo {
  text-align: center;
  font-size: 30rpx;
  font-weight: 500;
  color: #678AD5;
  margin-top: 20rpx;
}

.authentication-tips-list {
  padding: 40rpx 30rpx;
}

.authentication-tips-item {
  font-size: 26rpx;
  font-weight: 500;
  color: #666666;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  img {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }
}

.authentication-bottom-btn {
  position: fixed;
  bottom: 0;
  width: 100vw;
  padding-bottom: 30rpx;

  .authentication-bottom-top {
    display: flex;
    justify-content: center;

    .van-button {
      width: calc(100% - 60rpx);
      height: 100rpx;
      line-height: 100rpx;
      font-size: 36rpx;
    }
  }

  .authentication-bottom-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;

    img {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    text {
      color: #999;
      font-size: 24rpx;
    }
  }
}

.upload-content {
  .upload-content-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    margin: 36rpx 0 50rpx 0;
    text-align: center;
  }

  .upload-content-img {
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
  }

  .upload-content-img-item {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 30rpx;


    img.upload-content-img-item-photo {
      width: 100%;
    }

    img.upload-content-img-item-is-no {
      width: 36rpx;
      position: absolute;
      right: 10rpx;
      top: 10rpx;
    }
  }

  .upload-content-item {
    height: 80rpx;
    line-height: 80rpx;
    color: #333333;
    font-size: 32rpx;
    text-align: center;
    border-top: 1px solid #F7F8F9;
  }
}

// 认证成功
.authentication-success-box {
  width: 450rpx;
  height: 366rpx;
  margin: 80rpx auto;
  position: relative;

  img {
    width: 100%;
  }

  view {
    font-size: 40rpx;
    font-weight: 600;
    text-align: center;
    color: #262626;
    position: absolute;
    bottom: 0;
    width: 100%;

  }
}

.success {
  display: block;
  margin: 0 auto;
}
</style>